<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]">
    <div class="container">
      <div class="top">
<!--        <div class="left">-->
<!--          <div style="width: 36.5rem; color: #fff;">-->
<!--            <div style="font-size: 2em">您好，</div>-->
<!--            <div style="font-size: 1.2em">欢迎来到</div>-->
<!--            <div>权威信息 可追溯</div>-->
<!--            <div style="width: 10px; height: 3px;background: #CBB486; margin: 1.2rem 0"></div>-->
<!--            <div>-->
<!--              <div style="font-size: 1.4em">重要提示</div>-->
<!--              <p style="text-align: justify; font-size: 1.2em;color: #CCD2DB">-->

<!--                根据《刑法》第二百五十三条、《消费者权益保护法》第二十九条以及《网络安全法》等关于【侵犯公民个人信息罪】的相关法律规定，提示汽车经销商及其工作人员对收集的消费者个人信息必须严格保密，未经消费者同意或授权的情况下，不得泄露、出售或者非法向他人提供。-->
<!--              </p>-->

<!--            </div>-->
<!--            <div>-->
<!--              <div style="font-size: 1em; color: #CBB486;text-align: right"></div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>-->
        <div class="left" style="position: relative">
          <div class="logo" style="position: absolute;margin-top: 70px;left: 35px">
          </div>
          <div class="leftImg"></div>
<!--          <div class="leadWord">-->
<!--            <div class="line1">-->
<!--              <img src="../../assets/img/line1.png"/>-->
<!--            </div>-->
<!--            <div class="line2">-->
<!--              <img src="../../assets/img/line2.png"/>-->
<!--            </div>-->
<!--            &lt;!&ndash;                        <div class="line1">您好，</div>&ndash;&gt;-->
<!--            &lt;!&ndash;                        <div class="line2">&ndash;&gt;-->
<!--            &lt;!&ndash;                            <div>欢迎来到车信盟</div>&ndash;&gt;-->
<!--            &lt;!&ndash;                            <div>权威信息 可追溯</div>&ndash;&gt;-->
<!--            &lt;!&ndash;                        </div>&ndash;&gt;-->
<!--          </div>-->
        </div>
<!--        <div class="right">-->
<!--          <div style="width: 23rem">-->
<!--            <div class="header">-->
<!--              <div style="display: flex; align-items: center; margin: 1rem 0">-->
<!--                <div style="flex: 1;text-align:right;margin-right: 2rem;">-->
<!--                  <span class="title">低碳大屏后台管理系统</span>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--            <div class="l-login" :style="captchaHeight">-->
<!--              <route-view></route-view>-->
<!--            </div>-->
<!--            &lt;!&ndash;   <div style="flex: 1;text-align:center;margin-top:1rem;">-->
<!--                 <span class="title">扫码登录车信盟APP</span>-->
<!--                 <div id="qrcode" ref="qrcode" style="margin-left:7rem;"></div>-->
<!--               </div> &ndash;&gt;-->
<!--          </div>-->

<!--        </div>-->
        <div class="right">
          <div class="rightContent">
            <div class="header">
              <!--              <div style="display: flex; align-items: center; margin: 1rem 0">-->
              <!--                <div style="width: 7.7rem; border-right: 1px solid #6D7270">-->
              <!--                  <img src="~@/assets/logo_3.png" class="logo" alt="logo" width="100" height="25">-->
              <!--                </div>-->
              <!--                <div style="flex: 1;margin-left: 20px;padding-bottom: 3px">-->
              <!--                  <span class="title">汽车流通信息服务平台</span>-->
              <!--                </div>-->
              <!--              </div>-->
              <span class="title">
<!--                <img src="../../assets/img/right.png"/>-->
                欢迎您登录
              </span>
              <div class="subtitle">你可以直接输入您的账号和密码登录</div>
            </div>
            <div class="l-login" :style="captchaHeight">
              <route-view></route-view>
            </div>
          </div>
        </div>
      </div>
<!--      <div class="footer">-->
<!--        <div class="copyright" style="color: #94C3FF">-->
<!--          <img src="https://www.chexinmeng.com/CxmPlatform/static/img/ba.png" alt="">-->
<!--          <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=31010502005208" style="color: #94C3FF"-->
<!--             target="_blank"> &nbsp;沪公网安备-->
<!--            31010502005208号 </a>-->
<!--          &nbsp;<span>2019-22</span> ©-->
<!--          <a href="http://www.beian.miit.gov.cn" style="color: #94C3FF" target="_blank"> 沪ICP备08015411号-16</a>&nbsp;-->
<!--          &nbsp;-->
<!--        </div>-->
<!--      </div>-->

    </div>
  </div>
</template>

<script>
import RouteView from '@/components/layouts/RouteView'
import { mixinDevice } from '@/utils/mixin.js'
import QRCode from 'qrcodejs2'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data() {
    return {}
  },
  mounted() {
    document.body.classList.add('userLayout')
    /*
        new QRCode('qrcode', {
          width: 150,
          height: 150, // 高度
          text: window._CONFIG['appDownLoadUrl'] // 二维码内容
          // render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
          // background: '#f0f'
          // foreground: '#ff0'
        }) */
  },
  methods: {
    captchaHeight() {
      return  localStorage.getItem('validcode') ? 'height: 27.5rem' : 'height: 23.5rem'

    }
  },
  beforeDestroy() {
    document.body.classList.remove('userLayout')
  }
}
</script>

<!--
<style lang="less" scoped>
  #userLayout.user-layout-wrapper {
    height: 100%;

    &.mobile {
      .container {
        .main {
          max-width: 400px;
          width: 98%;
        }
      }
    }

    .container {
      width: 100%;
      min-height: 100%;
      /*background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;*/
      background: #000c17;
      background-size: 100%;
      padding: 110px 0 144px;
      position: relative;

      a {
        text-decoration: none;
      }

      .top {
        text-align: center;

        .header {
          height: 44px;
          line-height: 44px;

          .badge {
            position: absolute;
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            margin-left: -12px;
            margin-top: -10px;
            opacity: 0.8;
          }

          .logo {
            height: 44px;
            vertical-align: top;
            margin-right: 16px;
            border-style: none;
          }

          .title {
            font-size: 33px;
            color: rgba(0, 0, 0, .85);
            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
            font-weight: 600;
            position: relative;
            top: 2px;
          }
        }
        .desc {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          margin-top: 12px;
          margin-bottom: 40px;
        }
      }

      .main {
        min-width: 260px;
        width: 368px;
        margin: 0 auto;
      }

      .footer {
        position: absolute;
        width: 100%;
        bottom: 0;
        padding: 0 16px;
        margin: 48px 0 24px;
        text-align: center;

        .links {
          margin-bottom: 8px;
          font-size: 14px;
          a {
            color: rgba(0, 0, 0, 0.45);
            transition: all 0.3s;
            &:not(:last-child) {
              margin-right: 40px;
            }
          }
        }
        .copyright {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
    }
  }
</style>-->

<style lang='less' scoped>
#userLayout.user-layout-wrapper {
  height: 100%;

  .container {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100%;
    //background:#64b8aa;
    background-image: url(~@/assets/img/mountainBac.jpg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    flex-direction: row;

    .top {
      //display: flex;
      /*flex-direction: row;*/
      /*background: #00feff;*/
      //flex: 1;
      display: flex;
      flex: 1;
      // 水平居中
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -55%);
      width: 1780px;
      height: 1020px;

      //.left {
      //  /*background: red;*/
      //  flex: 1;
      //  display: flex;
      //  justify-content: center;
      //  /*padding-right: 4rem;*/
      //  border-right: 1px solid #6D7270;
      //}
      .left {
        flex: 1;
        display: flex;
        justify-content: center;
        //border-right: 1px solid #6D7270;
        border-radius: 24px 0 0 24px;
        background-color: #FFFFFF;
        //background-image: url('../../assets/img/loginLeft.svg');
        //background-size: 100% 100%;
        //background-repeat: no-repeat;
        .leftImg{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 80%;
          height: 80%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-image: url('../../assets/img/loginLeft.svg');
          background-size: 100% 100%;
          background-repeat: no-repeat;
          flex: 1;

        }

        .qrcode {
          position: absolute;
          right: 10px;
          top: 35px;
          width: 172px;

          .qrImg {
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
          }

          .qrText {
            color: white;
            text-align: center;
            margin-top: 110px;
            letter-spacing: 1px;
          }
        }

        .leadWord {
          position: absolute;
          left: 55px;
          top: 60px;
          padding-bottom: 80px;

          .line1 {
            margin-top: 20px;
            margin-left: 10px;
            background-image: linear-gradient(to bottom, #e2e3e8, #8f96aa);
            -webkit-background-clip: text;
            color: transparent;
            letter-spacing: 2px;
            font-size: 50px;
            font-weight: 600;
            line-height: 1.5;
            margin-bottom: 20px;
            text-shadow: 3px 3px 5px white;

            img {
              width: 120px
            }
          }

          .line2 {
            margin-top:20px;
            margin-left:10px;
            letter-spacing: 2px;
            font-size: 32px;
            //font-weight: 600;
            line-height: 1.5;
            background-image: linear-gradient(to bottom, #e7e9ec, #8f95a5);
            -webkit-background-clip: text;
            color: transparent;

            img {
              width: 220px
            }
          }

          .toUrl {
            margin-top: 20px;
            width: 280px;
            border-radius: 10px;
            border: 1px solid #ffffff;
            cursor: pointer;
            line-height: 55px;
            color: white;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
            letter-spacing: 1.5px;
          }
        }
      }
      .right {
        flex: 0 0 52%;
        align-items: center;
        justify-content: center;
        background-color: white;
        border-radius: 0 24px 24px 0;
        width: 100%;
        position: relative;

        .rightContent {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          padding: 0 40px;


          .header {
            width: 100%;
            text-align: left;
            margin-bottom: 40px;

            .title {
              width: 100%;
              color: #000c17;
              font-size: 30px;
              //font-weight: 600;
              letter-spacing: 1px;
              margin-left: 10px;

              img {
                width: 380px
                //padding-right 40px
              }
            }
            .subtitle{
              width: 100%;
              color: #767C87;
              font-size: 14px;
              //font-weight: 600;
              //letter-spacing: 1px;
              margin-top: 20px;
              margin-left: 10px;
            }
          }

          .l-login {
            background: #ffffff;
            border-radius: 8px;
            width: 100%;

            .usernameInput {
              margin-bottom:20px !important
            }
          }
        }
      }
      //.right {
      //  /*background: blue;*/
      //  flex: 0 0 44%;
      //  display: flex;
      //  align-items: center;
      //  justify-content: center;
      //
      //  .title {
      //    color: #ffffff;
      //    font-size: 1.5em;
      //  }
      //
      //  .l-login {
      //    background: #ffffff;
      //    padding: 1rem;
      //    border-radius: 8px;
      //  }
      //}
    }

    //.footer {
    //  position: absolute;
    //  width: 100%;
    //  bottom: 0;
    //  padding: 0 16px;
    //  margin: 48px 0 24px;
    //  text-align: center;
    //
    //  .links {
    //    margin-bottom: 8px;
    //    font-size: 14px;
    //
    //    a {
    //      color: rgba(0, 0, 0, 0.45);
    //      transition: all 0.3s;
    //
    //      &:not(:last-child) {
    //        margin-right: 40px;
    //      }
    //    }
    //  }
    //
    //  .copyright {
    //    color: rgba(0, 0, 0, 0.45);
    //    font-size: 14px;
    //  }
    //}
    .footer {
      position: absolute;
      width: 97%;
      bottom: 0;
      padding: 0 16px;
      margin: 48px 0 24px;
      text-align: center;

      .links {
        margin-bottom: 8px;
        font-size: 14px;

        a {
          color: rgba(0, 0, 0, 0.45);
          transition: all 0.3s;

          &:not(:last-child) {
            margin-right: 40px;
          }
        }
      }

      .copyright {
        color: rgba(0, 0, 0, 0.45);
        font-size: 14px;
      }
    }
  }
}
</style>